<template>
  <div class="tool_list">
    <el-card>
      <span class="card-title">PYTHON工具</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">python自动化测试工具</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('Flow')" class="card-title">流程图</span>
      <el-divider border-style="dashed"/>
    </el-card>

    <el-card>
      <span @click="ToRoute('JupyterLab')" class="card-title">JupyterLab</span>
      <el-divider border-style="dashed"/>
    </el-card>

    <el-card>
      <span @click="ToRoute('welibk')" class="card-title">IO 5000</span>
      <el-divider border-style="dashed"/>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">Conbench</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">性能测试工具，常用于对象存储测试</span>
    </el-card>


    <el-card @click="ToRoute('探索性测试')" >
      <span class="card-title">探索性测试</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">高度自动化的探索性测试</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">命令行</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">命令行工具</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('JSON编辑器')" class="card-title">JSON格式化</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">JSON格式化工具</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('终端命令行')" class="card-title">终端命令行</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">linux网页版的终端命令行</span>
    </el-card>


    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">FIO</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">fio性能自动化测试</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">代码编辑器</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">好用的代码编辑器</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">监控</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">监控平台</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">日志分析</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">日志分析平台</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">Jupyter</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">python网页版数据分析工具，可用于半自动化编程</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">正则表达式</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">自动化生成正则表达式结果</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('探索性测试')" class="card-title">探索性测试</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">高度自动化的探索性测试</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">探索性测试</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">高度自动化的探索性测试</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('exploratory')" class="card-title">探索性测试</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">高度自动化的探索性测试</span>
    </el-card>

    <el-card>
      <span @click="ToRoute('PythonWebSocket')" class="card-title">PythonWebSocket</span>
      <el-divider border-style="dashed"/>
      <span class="card-desc">高度自动化的探索性测试</span>
    </el-card>

  </div>

</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";

const router = useRouter()
const ToRoute = (name) => {
  router.push({"name": name})
}
</script>

<style>
.el-main {
  padding: 0 !important;
}
.el-header{
  margin-bottom: 0 !important;
}
.tool_list {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-grow: 0;
  flex-shrink: 3;
  flex-wrap: wrap;
  flex-basis: 25%;
  background-image: linear-gradient(to bottom right, #f1dddd, rgba(172, 238, 195, 0.82));
  overflow: auto;
}

.el-row {
  margin-top: 50px;
}

.el-card {
  margin-left: 40px;
  margin-top: 20px;
  height: 180px;
  border-radius: 20px;
  width: 300px;
  align-items: center;
}

.card-title {
  font-size: 20px;
  text-align: center;
}

.el-card:hover .card-desc {
  font-size: 20px;
}

.el-card:hover .card-title {
  font-size: 16px;
}

.el-card:hover .el-divider {
  animation: blink 2s infinite alternate;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    margin: 2px 0 5px;
  }
}

.el-card:hover {
  cursor: pointer;
}

.el-card .el-divider {
  margin: 20px 0 5px;
}
</style>
